@import "../styles/mixin.less";
@import "../styles/var.less";

.message{
    .self-center();
    z-index: 999;
    border-radius: 10px;
    padding: 10px 30px;
    line-height: 2; 
    display: flex;
    align-items: center; 
    color: #ffffff;
    transform: translate(-50%, -50%) translateY(20px);
    transition: 0.6s;
    opacity: 0;
    white-space: nowrap;
    box-shadow: -2px 2px 5px rgba(0,0,0,0.5);
}

.icon{
    margin-right: 10px;
    font-size: 2em;
}

.message{
    &-info{
        background: @primary;
    }
    &-success{
        background: @success;
    }
    &-warn{
        background: @warn;
    }
    &-error{
        background: @danger;
    }
    
}